<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./assets/css/base.css" />
    <link rel="stylesheet" href="./assets/css/index.css" />
    <link rel="stylesheet" href="./assets/css/tab.css" />
    <link rel="stylesheet" href="./assets/css/store.css">
    <link rel="stylesheet" href="./assets/css/shop-cart.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>

<body>
    <button onclick="alert('主内容全部都遮罩覆盖')">主内容全部都遮罩覆盖</button>
    <div class="masking" onclick="maskHidden()">
    </div>
    <div class="shop-cart">
        <div class="shop-capsule">
            <img class="shop-cart-img" src="./assets/img/shop-cart-gray.png" alt="" srcset="" onclick="show()">
            <div>

            </div>
        </div>
    </div>
    <div class="shop-list">
        <div class="shop-cart-item">
            1
        </div>
        <div class="shop-cart-item">
            1
        </div>
        <div class="shop-cart-item">

        </div>
    </div>
    <script src="./assets/js/flexible.js"></script>
    <script>
        let modal = document.getElementsByClassName('masking')[0]
        let cart = document.getElementsByClassName('shop-list')[0]
        const show = () => {
            modal.classList.toggle('visible')
            cart.classList.toggle('visible')
        }

        const maskHidden = () => {
            modal.classList.toggle('visible')
            cart.classList.toggle('visible')
        }
    </script>
</body>

</html>